<template>
  <a-modal
    width="800px"
    v-model="modalVisible"
    :destroyOnClose="true"
    :maskClosable="false"
    :title="title"
    @cancel="cancel"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel" :disabled="loading"> 取消 </a-button>
      <a-button key="submit" @click="save" type="primary" :loading="loading">
        确定
      </a-button>
    </template>
    <a-spin :spinning="spinning">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="config.labelCol"
        :wrapper-col="config.wrapperCol"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="parentId" label="上级" prop="parentId">
              <a-tree-select
                placeholder="请选择上级"
                allow-clear
                v-model="form.parentId"
                show-search
                style="width: 100%"
                treeNodeFilterProp="title"
                :tree-data="data"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                @select="treeSelect"
              >
              </a-tree-select>
            </a-form-model-item>

            <a-form-model-item ref="icon" label="图标" prop="icon">
              <eip-icon
                :name="form.icon"
                :theme="form.theme"
                @click="iconClick"
                @clear="iconClear"
              ></eip-icon>
            </a-form-model-item>
            <a-form-model-item
              ref="controller"
              label="控制器"
              prop="controller"
            >
              <a-input v-model="form.controller" placeholder="请输入控制器" />
            </a-form-model-item>
            <a-form-model-item ref="path" label="地址" prop="path">
              <a-input v-model="form.path" placeholder="请输入地址" />
            </a-form-model-item>

            <a-form-model-item ref="orderNo" label="排序号" prop="orderNo">
              <a-input-number
                id="inputNumber"
                style="width: 100%"
                placeholder="请输入排序号"
                v-model="form.orderNo"
                :min="0"
                :max="999"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="name" label="名称" prop="name">
              <a-input v-model="form.name" placeholder="请输入名称" />
            </a-form-model-item>
            <a-form-model-item ref="router" label="路由" prop="router">
              <a-input v-model="form.router" placeholder="请输入路由" />
            </a-form-model-item>
            <a-form-model-item ref="action" label="方法" prop="action">
              <a-input v-model="form.action" placeholder="请输入方法" />
            </a-form-model-item>
            <a-form-model-item ref="openType" label="打开类型" prop="openType">
              <a-select default-value="0">
                <a-select-option value="0"> 单页面 </a-select-option>
                <a-select-option value="1"> Iframe </a-select-option>
                <a-select-option value="2"> 新窗口 </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="禁用" prop="isFreeze">
              <a-switch v-model="form.isFreeze" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-model-item
              label="参数"
              prop="params"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <a-input
                v-model="form.params"
                type="textarea"
                placeholder="请输入参数,参数为json格式"
              />
            </a-form-model-item>
            <a-form-model-item
              label="选项"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <a-checkbox :checked="form.isShowMenu" @change="isShowMenu">
                模块显示
              </a-checkbox>
              <a-checkbox
                :checked="form.haveMenuPermission"
                @change="haveMenuPermission"
              >
                模块权限
              </a-checkbox>
              <a-checkbox
                :checked="form.haveFunctionPermission"
                @change="haveFunctionPermission"
              >
                模块按钮权限
              </a-checkbox>
              <a-checkbox
                :checked="form.haveDataPermission"
                @change="haveDataPermission"
              >
                数据权限
              </a-checkbox>
            </a-form-model-item>

            <a-form-model-item
              label="备注"
              prop="remark"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <a-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { save, findById } from "@/services/system/menu/edit";
import eipIcon from "@/pages/common/usercontrol/eip-icon";
import { emptyGuid } from "@/utils/util";
export default {
  components: { eipIcon },
  name: "edit",
  data() {
    return {
      config: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      form: {
        menuId: emptyGuid(),
        parentId: null,
        parentName: null,
        name: null,
        icon: null,
        theme: null,
        openType: 0,
        path: null,
        router: null,
        controller: null,
        action: null,
        isShowMenu: false,
        haveMenuPermission: false,
        haveFunctionPermission: false,
        haveDataPermission: false,
        haveFieldPermission: false,
        isFreeze: false,
        orderNo: 0,
        params: null,
        remark: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        params: [
          {
            validator: (rule, value, callback) => {
              if (typeof value === "undefined" || value === "") {
                callback();
              } else {
                try {
                  var obj = JSON.parse(value);
                  if (typeof obj == "object" && obj) {
                    callback();
                  } else {
                    callback(new Error("请输入正确参数格式,参数为json"));
                  }
                } catch (e) {
                  callback(new Error("请输入正确参数格式,参数为json"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        router: [
          {
            required: true,
            message: "请输入路由",
            trigger: "blur",
          },
        ],
      },

      modalVisible: this.visible,
      loading: false,
      spinning: false,
    };
  },

  watch: {
    visible(val) {
      this.modalVisible = val;
    },
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
    },
    title: {
      type: String,
    },
    copy: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    /**
     *
     */
    isShowMenu(e) {
      this.form.isShowMenu = e.target.checked;
    },
    /**
     *
     */
    haveMenuPermission(e) {
      this.form.haveMenuPermission = e.target.checked;
    },
    /**
     *
     */
    haveFunctionPermission(e) {
      this.form.haveFunctionPermission = e.target.checked;
    },
    /**
     *
     */
    haveDataPermission(e) {
      this.form.haveDataPermission = e.target.checked;
    },
    /**
     *
     */
    haveFieldPermission(e) {
      this.form.haveFieldPermission = e.target.checked;
    },

    /**
     * 树选择
     */
    treeSelect(electedKeys, e) {
      this.form.parentName = e.title;
      this.form.parentId = e.eventKey;
    },

    /**
     * 取消
     */
    cancel() {
      this.reset();
      this.$emit("close");
    },

    /**
     * 保存
     */
    save() {
      let _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          _this.loading = true;
          _this.spinning = true;
          _this.form.menuId = _this.copy ? emptyGuid() : _this.form.menuId;
          save(_this.form).then(function(result) {
            if (result.code === _this.$resultCode.success) {
              _this.$message.success(result.msg);
              _this.reset();
              _this.$emit("save", result);
            } else {
              _this.$message.error(result.msg);
            }
            _this.loading = false;
            _this.spinning = false;
          });
        } else {
          return false;
        }
      });
    },

    /**
     * 重置
     */
    reset() {
      this.loading = false;
      this.$refs.form.resetFields();
      this.form.menuId = emptyGuid();
      this.form.isShowMenu = false;
      this.form.haveMenuPermission = false;
      this.form.haveFunctionPermission = false;
      this.form.haveDataPermission = false;
      this.form.haveFieldPermission = false;
    },

    /**
     * 赋予父级
     */
    setParent(parentId, parentName) {
      this.form.parentId = parentId;
      this.form.parentName = parentName;
    },

    /**
     * 根据Id查找
     */
    find(menuId) {
      let _this = this;
      _this.spinning = true;
      findById(menuId).then(function(result) {
        let form = result.data;
        _this.form.menuId = form.menuId;
        _this.form.parentName = form.parentName;
        _this.form.parentId =
          form.parentName == "" ? emptyGuid() : form.parentId;

        _this.form.openType = form.openType;
        _this.form.path = form.path;
        _this.form.router = form.router;
        _this.form.controller = form.controller;
        _this.form.action = form.action;

        _this.form.isShowMenu = form.isShowMenu;
        _this.form.haveMenuPermission = form.haveMenuPermission;
        _this.form.haveFunctionPermission = form.haveFunctionPermission;
        _this.form.haveDataPermission = form.haveDataPermission;
        _this.form.haveFieldPermission = form.haveFieldPermission;

        _this.form.params = form.params;
        _this.form.name = form.name;
        _this.form.orderNo = form.orderNo;
        _this.form.isFreeze = form.isFreeze;
        _this.form.remark = form.remark;
        _this.form.icon = form.icon;
        _this.form.theme = form.theme;
        _this.spinning = false;
      });
    },

    /**
     *图标点击
     */
    iconClick(icon) {
      this.form.icon = icon.name;
      this.form.theme = icon.theme;
    },

    /**
     * 清空图标
     */
    iconClear() {
      this.form.icon = null;
      this.form.theme = null;
    },
  },
};
</script>

<style lang="less" scoped></style>
